<template>
  <div>
    <div class="operate_wrap flex">
      <div class="flex-center">
        <el-button v-permission="permission.add" type="primary" size="small" class="add buildButtonStyle" @click="clickAdd('build')"><i class="iconfont icon-icon_add"></i> 新增
        </el-button>
      </div>
      <div class="flex-right">
        <el-select class="select" size="small" v-model="search.gclx" v-on:change="getList()" value-key="id" clearable placeholder="选择工程类型">
          <el-option v-for="(item,index) in selectList.enginTypeList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="list_wrap" style="padding: 0 20px">
      <el-table class="approveItem-setting-table" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px">
        <el-table-column show-overflow-tooltip label="序号" type="index" width="80">
          <template slot-scope="scope">
            <span>{{search.pageIndex * search.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="simpleName" align="left" width="250" label="批复项简称">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="workContent" align="left" label="工作内容">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="unit" align="left" label="对接部门/单位">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="timeUse" align="left" width="160" label="办理用时">
        </el-table-column>
        <el-table-column show-overflow-tooltip width="230" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','查看',scope.row.id)">&nbsp;查看</el-button>
            <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','编辑',scope.row.id)">&nbsp;修改</el-button>
            <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.pageSum" :current-page="search.pageIndex + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
      </el-pagination>
    </div>
    <settingDetail :postDetail="postDetailData" @reloadList="getList"></settingDetail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import { getListForSetting, delSetting } from '@/api/buss/frontProject'
import msgUtil from "@/utils/msgUtil";
import crudDict from '@/api/system/dict'
export default {
  components: {
    settingDetail: require(`../approveSetting/approveSetting-detail`).default
  },
  name: 'problem',
  data() {
    return {
      permission: {
        add: ['100', '批复项工作设置:add'],
        show: ['100', '批复项工作设置:show'],
        edit: ['100', '批复项工作设置:edit'],
        del: ['100', '批复项工作设置:del'],
      },
      selectList: {
        enginTypeList: []
      },
      postDetailData: {
        show: false,
        type: 'build'
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      list: [],
      companyTree: [],
      projectTree: [],
      search: {
        pageIndex: 0,
        pageSize: 10,
        pageSum: 0,
        gclx: ''
      },
    }
  },
  computed: {
    tableHeight: function () {
      return (window.innerHeight - 300) + 'px';
    }
  },
  created() {
    // this.getList()
    this.getEnginTypeList()
  },
  methods: {
    getEnginTypeList() {
      crudDict.getByCode('enginType').then(res => {
        if (res.code === 200) {
          this.selectList.enginTypeList = []
          var data = res.data;
          for (var i in data) {
            this.selectList.enginTypeList.push({ 'value': data[i].id, 'label': data[i].name });
          }
          if (this.selectList.enginTypeList.length > 0) {
            this.search.gclx = this.selectList.enginTypeList[0].value
            this.getList()
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取工程类型失败")
      })
    },
    showDialog(type, typeName, detailId) {
      switch (type) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据?').then(res => {
            let idlist = []
            idlist.push(detailId)
            let param = {
              ids: idlist
            }
            delSetting(param).then(res => {
              if (res.code === 200) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break

      }
    },
    clickAdd(val) {
      this.showDetailDialog(val)
    },
    handleClickDeal(row, type) {
      let detailId = row.id
      switch (type) {
        // 查看
        case 'show':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
          })
          break
      }
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      if (!params) {
        params = {}
      }
      let postData = {}
      switch (flag) {
        case 'build':
          postData = {
            show: true,
            type: 'build',
            typeName: '新增',
            params: params,
          }
          break
        case 'show':
          postData = {
            show: true,
            type: 'check',
            typeName: '查看',
            params: params,
          }
          break
      }
      this.postDetailData = postData

    },
    cellClick(row, column, cell, event) {
      if (column.property === 'workContent') {
        this.showDialog('check', '查看', row.id)
      }
    },
    fixQueryB() {
      this.getList()
    },
    fixQueryA() {
      // this.projectTree = res.list
      this.search.project = this.search.company.children[0]
      this.getList()
      // getProject({companyId : this.search.company.id}).then((res) => {
      //   this.projectTree = res.list
      //   this.search.project = res.list[0]
      //   this.getList()
      // })
      //   .catch((res) => {
      //     console.log('请求出现错误', res)
      //     this.isLoading = false
      //     // this.$messageError(this.$route.name + '提交详情-请求失败')
      //   })
    },
    getCompanyTree(callback) {
      getCompanyTree().then((res) => {
        // res.list.forEach(item=>{
        //   if('南阳方枣高速公路有限公司' === item.fullname){
        //     this.companyTree.push(item)
        //   }
        // })
        this.companyTree = res.list
        // this.search.company = res.list[0]
        this.search.company = this.companyTree[0]
        this.fixQueryA()
        if (callback) callback()
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          // this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
    // 切换列表
    paginationChange(index) {
      this.search.pageIndex = index - 1
      this.getList()
    },
    getList() {
      this.list.splice(0, this.list.length)
      getListForSetting(this.search).then((res) => {
        if (res.code === 200) {
          let data = res.data
          if (data.content != null) {
            this.$set(this, 'list', res.data.content)
            this.search.pageSum = parseInt(res.data.totalElements)
          }

        } else {
          this.isLoading = false
          // this.$messageError(res.data.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  margin: 0 25px;
  .select {
    width: 250px;
  }
}
</style>
